Заключительный урок по редактированию стандартного шаблона Joomla я решил посвятить адаптации под мобильные устройства. Мы поговорим о том, как сделать шаблон пригодным для просмотра на всех устройства без исключения, будь то компьютер с высоким разрешением экрана или обычный мобильный телефон.
Сам по себе шаблон Protostar использует bootstrap и уже является адаптивным, однако, после внесения в него каких либо изменений (изменение шапки сайта, футера или области контента) мы можем нарушить его адаптивность. Следовательно, это нужно исправить.
Урок будет построен следующим образом, сначала я расскажу о том, как пользоваться панелью устройств браузера Google Chrome, а затем мы приступим к редактированию нашего шаблона и сделаем его адаптивным при помощи медиа-запросов.
Панель переключения устройств
Для того чтобы посмотреть как наш сайт будет выглядеть на различных устройствах в браузере от Гугла есть замечательный инструмент – панель переключения устройств (toggle device toolbar).
Открывается данная панель нажатием сочетаний клавиш Ctrl+Shift+M или по средствам нажатия на соответствующую кнопку вверху панели разработчика:
После того как мы открыли панель переключения устройств мы можем выбрать из предложенного списка одно из устройств и посмотреть как будет выглядеть сайт на данном устройстве. Либо выбрать Responsive и ввести значения ширины и высоты экрана по своему усмотрению:
Таким образом, можно играя со значениями ширины и высоты экрана посмотреть на наш сайт глазами пользователей мобильных устройств и по необходимости внести соответствующие корректировки в дизайн.
Делаем сайт адаптивным
А теперь давайте попробуем выявить недостатки в дизайне сайта и попробуем их исправить. И начнем, пожалуй, с основной части сайта.
Изначально тело сайта в шаблоне Protostar имеет отступы по всем краям в размере 20 пикселей, считаю это слишком расточительным особенно для устройств с небольшими экранами. Поэтому предлагаю изначально избавиться от этих отступов.
Причем надо сделать так чтобы на устройствах с большими экранами отступы остались, а на телефонах или планшетах их не было. Для этих целей отлично подойдет медиа-запрос, но для начала необходимо определиться какая ширина экрана должна быть у устройства, на котором не должно быть отступов в теле сайта.
Я решил, что отступы не нужны на устройствах с шириной экрана 420 пикселей и менее (просто не встречал еще телефонов, у которых ширина больше). В результате медиа-запрос будет таким:
@media (max-width: 420px){ /*Ширина экрана 420 пикселей и менее*/
}
Теперь надо определить какой из блоков на странице дает отступы, это оказался блок <body> с классом site, у которого значение padding было 20 пикселей. Пишем новое значение свойства и вставляем его в наш файл стилей:
@media (max-width: 420px){ /*При такой ширине*/
body.site {padding: 20px;} /*убираем отступы в теле сайта*/
}
Сохраняем файл стилей и смотрим на результат:
Идем дальше, теперь необходимо проверить, как будет отображаться на мобильных устройствах наше горизонтальное меню. Я обнаружил, что при ширине экрана 420 пикселей меню отображается корректно, но уже при ширине 408 пикселей начинает съезжать и тем больше чем меньше ширина экрана:
Чтобы от этого избавиться придется сделать меню вертикальным, лично я считаю, что такое меню будет смотреться гораздо лучше. К счастью много свойств писать не пришлось, необходимо всего на всего увеличить ширину пункта меню до 100%. Пишем медиа-запрос и добавляем в него свойство ширины пункта меню:
@media (max-width: 408px){
ul.nav.menu_horizontal li {width: 100%;} /*ширина пункта меню 100%*/
}
Теперь можно посмотреть на результат и убедиться в том, что наше меню на мобильных устройствах с шириной 408 пикселей и менее будет вертикальным, а на больших экранах останется горизонтальным:
Таким не хитрым способом мы изменили оформление меню и теперь можем быть уверенны, что с ним будет удобно работать на различных устройствах.
На следующем этапе можно скрыть (по желанию) отображение информации о материале (дата создания, изменения и прочее) на мобильных устройствах. Для этого надо написать свойство display: none; для указанной ширины экрана.
Других аномалий в области контента я не заметил, все отображается корректно. Зато есть значительные недочеты в футере сайта, ведь он был сделан вручную:
Для редактирования футера чтобы придать ему адаптивность придется писать множество медиа-запросов для различного значения ширины экрана. Что делать, надо так надо, у меня получилось 8 медиа-запросов для экранов со значением ширины от 685 до 300 пикселей:
@media (max-width: 685px){/*Для футера*/
.foot-left {width: 25%;}
}
@media (max-width: 550px){/*Для футера*/
.foot-left {width: 27%;}
}
@media (max-width: 510px){/*Для футера*/
.foot-left {width: 30%;}
}
@media (max-width: 465px){/*Для футера*/
.foot-left {width: 35%;}
}
@media (max-width: 420px){ /*При такой ширине*/
.foot-left {width: 80%;margin-left: 5px;}
.foot-right {float: right;margin-top: 10px;}
}
@media (max-width: 408px){
ul.nav.menu_horizontal li {width: 100%;} /*ширина пункта меню 100%*/
}
@media (max-width: 360px){/*Для футера*/
.foot-left {width: 79%;}
}
@media (max-width: 300px){/*Для футера*/
.foot-left {width: 75%;}
}
В результате мы получили отличный футер, адаптированный под различные устройства:
В заключении хочу отметить что сделать шаблон адаптивным достаточно просто, главное иметь представление того что вы хотите увидеть в конечном итоге и немного практики.
Как и обещал, выкладываю мои файлы index.php и mycss.css, которые можно скачать, возможно, они Вам пригодятся.
